<template>
  <view>
    <map
        class="map"
        style="width: 100%; height: 40vh;"
        id="myMap"
        :latitude="lat"
        :longitude="lng"
        :markers="markers"
        :scale="12"
        @markertap="handleMarkerTap"
        @poitap="getPoitap"
        enable-zoom="true"
    >
      <view class="finding" v-if="!isLoading && detail.status==2">
        <text class="yz-iconfont yz-shalou"></text>
        正在寻找家教，请耐心等待
      </view>
    </map>


    <block v-if="!isLoading">
      <view class="lists" v-if="detail">
        <view class="refresh" @tap="refreshData">
          <view class="circle">
            <text class="yz-iconfont yz-shuaxin"></text>
          </view>
          <view class="text">刷新</view>
        </view>
        <view class="item">
          <view class="top">
            <view class="title">{{ detail.title }}</view>
            <view class="desc" v-if="detail.status==1">急招审核中...</view>
            <view class="desc" v-if="detail.status==2">招募中...</view>
            <view class="desc" v-if="detail.status==3">待教师完成教授...</view>
            <view class="desc" v-if="detail.status==4">已完成</view>
            <view class="count">
              <view>已有{{detail.staff_list.length}}人接单</view>
            </view>
          </view>
          <view class="bot" v-if="detail.staff_list.length>0">
            <view class="guys" v-for="(val,idx) in detail.staff_list">
              <view class="flex ali-cen">
                <view class="flex ali-cen">
                  <image :src="$xyfun.image(val.user.avatar)" class="avatar-60" mode="widthFix"></image>
                  <view class="m-l-20">{{ val.user.nickname }}</view>
                </view>
                <view class="m-l-20">
                  <text class="yz-iconfont yz-dianhua1" style="color:#52e322;"></text>
                  {{ val.user.mobile }}
                </view>
              </view>
              <view class="flex ali-cen">
                <view v-if="val.status==2">已录用</view>
                <view class="but" @tap="$xyfun.to('/pages/teacher/detail?id='+val.user_id)">查看资料</view>
                <view class="but" @tap="pass(val.id)" v-if="val.status==1">锁定</view>
                <view class="but" @tap="refuse(val.id)" v-if="val.status==1">淘汰</view>
              </view>

            </view>
          </view>
          <view class="bot" v-else>
            <view class="tc tc-999">
              <view class="xyicon icon-empty p-t-30" style="font-size: 80rpx;"></view>
              <view class="ts-22 m-t-20 m-20">暂时无人报名</view>
            </view>
          </view>
          <view class="flex just-sb" v-if="detail.status==2">
            <view class="cancel" @tap="cancelOrder()"><text class="yz-iconfont yz-guanbi1"></text>取消订单</view>
          </view>
          <view class="flex just-sb" v-if="detail.status==3">
            <view class="cancel" @tap="cancelOrder()"><text class="yz-iconfont yz-guanbi1"></text>取消订单</view>
            <view class="cancel" @tap="overOrder()">完结订单</view>
            <view class="cancel" v-if="detail.normal==1" @tap="platformIntervention()">平台介入</view>
            <view class="cancel" v-if="detail.normal==1" @click="$xyfun.to('/pages/user/order/feedback?id='+detail.id)">反馈</view>
          </view>
        </view>
      </view>
      <view v-else>
        <xy-empty text="没有正在急招的岗位" />
      </view>
    </block>

  </view>
</template>

<script>
import { mapState } from 'vuex';
import xyEmpty from "@/components/xy-empty/index.vue";
import xyTabbar from "@/components/xy-tabbar/index.vue";
import xyTitle from "@/components/xy-title/index.vue";

export default {
  components: {xyTitle, xyEmpty, xyTabbar},
  data() {
    return {
      isLoading: true,
      id : '',
      lat : 0,
      lng : 0,
      addr : '',

      detail: [],

      markers: [],
      callout_id: '',
    };
  },
  computed: {
    ...mapState(['common','user'])
  },

  async onLoad(options) {
    if(options?.id){
      this.id = options.id;
    }
    let localInfo =  this.$xyfun.getLatLng();
    this.lat = localInfo.lat;
    this.lng = localInfo.lng;
    console.log(localInfo)
    if(!localInfo.default){//使用的是确切的用户地址
      this.loadData();
    }
  },
  onPullDownRefresh() {
    this.loadData();
  },
  methods: {

    async loadData() {
      var that = this;
      this.$api.postBase({
        url: '/teacher_job/only',
        data: {
          id : this.id
        },
        success: res => {
          uni.stopPullDownRefresh();
          this.detail = res;
          // this.lat = res.lat;
          // this.lng = res.lng;
          // this.markers = this.$xyfun.point_draw([]);
          this.isLoading = false;
        },fail: res => {
          uni.showModal({
            title: '提示',
            content: '您当前没有正在急招的订单，请先发布急招信息！',
            confirmText: '确认',
            success: function (res) {
              if(res.confirm){
                that.$xyfun.to('/pages/job/push_job')
              }
            }
          });
        }
      });
    },

    //点击地图上某个工作，显示出冒泡，并且以此居中
    handleMarkerTap(e) {
      if(!e.detail.markerId==999){
        this.callout_id = e.detail.markerId;
      }
      this.lat = e.detail.latitude;
      this.lng = e.detail.longitude;
    },

    //点击地图的其他点关闭冒泡
    getPoitap(e){
      this.callout_id = '';
    },


    refreshData(){
      this.loadData();
    },

    //锁定
    pass(order_id){
      var that = this;
      uni.showModal({
        title: '提示',
        content: this.common.customConfig.staff_pass_notice,
        confirmText: '确认',
        success: function (res) {
          if(res.confirm){
            that.$api.postBase({
              url: 'staff_order/pass',
              loadingTip: '加载中...',
              data: {
                order_id : order_id
              },
              success: res => {
                that.refreshData();
              }
            })
          }
        }
      });

    },

    //淘汰
    refuse(order_id){
      var that = this;
      uni.showModal({
        title: '提示',
        content: this.common.customConfig.staff_refuse_notice,
        confirmText: '确认',
        success: function (res) {
          if(res.confirm){
            that.$api.postBase({
              url: 'staff_order/refuse',
              loadingTip: '加载中...',
              data: {
                order_id : order_id
              },
              success: res => {
                that.refreshData();
              }
            })
          }
        }
      });
    },

    //取消订单
    cancelOrder(){
      var that = this;
      uni.showModal({
        title: '提示',
        content: this.common.customConfig.job_cancel_notice,
        confirmText: '确认',
        success: function (res) {
          if(res.confirm){
            that.$api.postBase({
              url: 'teacher_job/cancelOrder',
              loadingTip: '加载中...',
              data: {
                id : that.detail.id
              },
              success: res => {
                that.detail.status = -2;
              }
            })
          }
        }
      });

    },
    //结束订单
    overOrder(){
      var that = this;
      uni.showModal({
        title: '提示',
        content: this.common.customConfig.job_over_notice,
        confirmText: '确认',
        success: function (res) {
          if(res.confirm){
            that.$api.postBase({
              url: 'teacher_job/overOrder',
              loadingTip: '加载中...',
              data: {
                id : that.detail.id
              },
              success: res => {
                console.log(res)
                that.detail.status = res;
                that.$xyfun.msg('操作成功')
              }
            })
          }
        }
      });
    },

    //平台介入
    platformIntervention(){
      var that = this;
      uni.showModal({
        title: '提示',
        content: this.common.customConfig.parent_interven_notice,
        confirmText: '确认',
        success: function (res) {
          if(res.confirm){
            that.$api.postBase({
              url : '/teacher_job/platformIntervention',
              loadingTip: '加载中...',
              data : {
                order_id : that.detail.id,
              },
              success: res=>{
                that.detail.normal = 0;
              }
            })
          }
        }
      });

    },

    //想要发布新急招之前先看看有没有正在急招的岗位，如果有的话不允许操作
    pushPreTest(url){
      var that = this;
      this.$api.postBase({
        url: '/teacher_job/only',
        success: res => {
          that.$xyfun.msg('有正在急招的订单，请完结之后再尝试操作')
        },fail: res => {
          that.$xyfun.to(url)
        }
      });
    }
  }
}
</script>

<style>
page{
  background: #fff;
}
</style>
<style lang="scss">

.map{
  width: calc(100% - 40rpx);
  margin: 20rpx;
  height: 600rpx;
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  .finding{
    position: absolute;
    width: 450rpx;
    background: rgba(51, 51, 51, 0.51);
    color: #fff;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 30rpx;
    line-height: 70rpx;
    border-radius: 30rpx;
    padding: 0 20rpx;
    font-size: 26rpx;
    text{
      color: #61e7e6;
      margin-right: 20rpx;
      font-size: 40rpx;
    }
  }
}

.refresh{
  //position: fixed;
  //top: 50vh;
  //left: 30rpx;
  width: 180rpx;
  border-radius: 40rpx;
  background: #fff;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  border: 1rpx solid #61e7e6;
  position: relative;
  margin-left: 35rpx;
  .circle{
    position: absolute;
    top: -10rpx;
    left: -50rpx;
    border-radius: 45rpx;
    background: #61e7e6;
    width: 90rpx;
    height: 90rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    text{
      font-size: 50rpx;
      color: #fff;
    }
  }
  .text{
    color: #868686;
    font-size: 24rpx;
  }
}

.lists{
  background: #f7f5f6;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 20rpx;
  .item{
    margin-bottom: 20rpx;
    margin-top: 50rpx;
    .top{
      margin-bottom: 20rpx;
      .title{
        display: inline-block;
        background: #848484;
        color: #fff;
        padding: 8rpx 20rpx;
        font-size: 28rpx;
        border-radius: 14rpx;
      }
      .desc{
        display: inline-block;
        font-size: 22rpx;
        margin-left: 20rpx;
        vertical-align: center;
      }
      .count{
        float: right;
        margin-top: 20rpx;
        transform: skew(-30deg);
        box-shadow: 2rpx 2rpx 5rpx #bbbbbb;
        font-size: 24rpx;
        background: #fff;
        color: #ff9d3a;
        border-radius: 18rpx;
        padding: 10rpx 30rpx;
        view{
          transform: skew(30deg);
        }
      }
    }
    .bot{
      background: #fff;
      border-radius: 10rpx;
      padding: 20rpx;
      .guys{
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 22rpx;
        margin-bottom: 20rpx;
        .but{
          color: #00baad;
          background: #e6f9f7;
          font-size: 20rpx;
          padding: 2rpx;
          margin-left: 20rpx;
        }
      }
      .more{
        font-size: 22rpx;
        text-align: center;
        margin-top: 10rpx;
      }
    }
    .cancel{
      text-align: right;
      color: #696969;
      font-size: 22rpx;
      margin-top: 20rpx;
      text{
        margin-right: 10rpx;
      }
    }
  }
}
</style>
